import React from "react";
import { Button, Input, Icon, Row, Col, Tabs } from "antd";
import { observer, inject } from "mobx-react";
import AddAPPOrPeopleModal from "./addAPPOrPeopleModal";
import AddControl from "./addcontrol";
import SubjectLeft from "./subjectleft";
import "./style.scss";

const titles = { APP: "APP", People: "人员", Subject: "专题" };
const { TabPane } = Tabs;

@inject("AppStore")
@inject("AddModalStore")
@observer
class SideLeft extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [{ name: "我的关注", key: "follow" }, { name: "自动推送", key: "autoPush" }],
            curOpenItem: ""
        };
    }

    componentDidMount() {
        console.log(this.props.AppStore);
        this.props.AppStore.init(this.props.type);
    }

    handleChangeTab = item => {
        this.props.AppStore.changeTab(item);
    };

    okCall = () => {
        console.log("设置管控结束后，刷新页面数据");
    };

    getRowName = () => {
        const { type } = this.props;
        if (!type) return [];
        const rowtitle = {
            APP: [{ name: "APP名称" }, { name: "风险评分" }, { name: "操作", isOperation: true }],
            People: [{ name: "人员名称" }, { name: "身份证" }, { name: "操作", isOperation: true }]
        };

        const curRow = rowtitle[type];
        return curRow.map(item => (
            <Col key={item.name} span={item.isOperation ? 10 : 7} className="app-list-col">
                {item.name}
                {!item.isOperation && (
                    <Icon type="swap" className="app-list-icon" onClick={() => console.log("paixu")} />
                )}
            </Col>
        ));
    };

    delete = item => {
        this.props.AppStore.delete(item);
    };

    cancelControl = id => {
        console.log("取消管控", id);
    };

    addAppControl = item => {
        console.log("加入管控", item);
        this.props.AppStore.selectCurOpenItem(item);
        this.props.AppStore.updateStatus({ addControl: true });
        // this.setState({ addControl: true, curOpenItem: item });
    };

    goDetail = item => {
        console.log("跳转到详情页面", item);
    };

    updateStatus = status => {
        this.props.AppStore.updateStatus(status);
    };

    showAddAPPOrPeopleModal = () => {
        const { AddModalStore } = this.props;
        AddModalStore.changeType(this.props.type);
        AddModalStore.changeVisible(true);
    };

    setKeywords = keywords => {
        this.props.AppStore.setKeywords(keywords);
    };

    search = () => {
        // getAppResultList方法传参关键字
        this.props.AppStore.getAppResultList();
    };

    render() {
        const { tabs, curOpenItem } = this.state;
        const { type } = this.props;
        const {
            resultData,
            curTab,
            status: { addControl, showSubNext }
        } = this.props.AppStore;

        return (
            <div>
                {type === "Subject" ? (
                    <SubjectLeft show={showSubNext} />
                ) : (
                    <div>
                        <div className="app-header">
                            <div className="app-list-title">
                                <h3 className="title-name">{titles[type || "APP"]}关注列表</h3>
                                <div className="app-div">
                                    <Button
                                        type="primary"
                                        className="add-btn"
                                        ghost={false}
                                        onClick={this.showAddAPPOrPeopleModal}
                                    >
                                        添加
                                    </Button>
                                </div>
                                <div className="app-text">
                                    共{<span>7</span>}个{titles[type || "APP"]}
                                </div>
                            </div>
                        </div>
                        {type !== "Subject" && (
                            <div>
                                <Input
                                    placeholder={`查找已关注${type === "People" ? "人员" : "APP"}`}
                                    prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
                                    suffix={
                                        <span style={{ color: "#4bb7ff", cursor: "pointer" }} onClick={this.search}>
                                            <Icon type="search" />
                                            搜索
                                        </span>
                                    }
                                    type={"text"}
                                    className="app-ipt"
                                    onChange={value => this.setKeywords(value)}
                                />
                            </div>
                        )}
                        {type !== "Subject" && (
                            <div className="app-list-content">
                                <div className="app-content-title">
                                    <Tabs
                                        defaultActiveKey="1"
                                        activeKey={curTab}
                                        className={`app-content-tab`}
                                        onChange={this.handleChangeTab}
                                    >
                                        {tabs.map(item => (
                                            <TabPane tab={item.name} key={item.key}>
                                                {resultData.length ? (
                                                    <div className="app-list">
                                                        <Row className="app-list-header">{this.getRowName()}</Row>
                                                        <div className="app-list-body">
                                                            {resultData.map(item => (
                                                                <Row key={`app-${item.id}`} className={`app-item`}>
                                                                    <Col span={7} className="app-list-col">
                                                                        <span
                                                                            className="item-name"
                                                                            onClick={() => this.goDetail(item)}
                                                                        >
                                                                            {item.name}
                                                                        </span>
                                                                    </Col>
                                                                    <Col span={7} className="app-list-col">
                                                                        {type === "APP" ? item.score : item.sfzh}
                                                                    </Col>
                                                                    <Col span={10} className="app-list-col">
                                                                        {curTab !== "autoPush" && (
                                                                            <span
                                                                                className="app-list-col-delete"
                                                                                onClick={() => this.delete(item)}
                                                                            >
                                                                                <Icon
                                                                                    type="close"
                                                                                    style={{ marginRight: 5 }}
                                                                                />
                                                                                删除
                                                                            </span>
                                                                        )}
                                                                        {item.follow ? (
                                                                            <span
                                                                                className="app-list-col-add"
                                                                                onClick={() =>
                                                                                    this.cancelControl(item.id)
                                                                                }
                                                                            >
                                                                                <Icon
                                                                                    type="minus"
                                                                                    style={{ marginRight: 5 }}
                                                                                />
                                                                                取消管控
                                                                            </span>
                                                                        ) : (
                                                                            <span
                                                                                className="app-list-col-add"
                                                                                onClick={() => this.addAppControl(item)}
                                                                            >
                                                                                <Icon
                                                                                    type="plus"
                                                                                    style={{ marginRight: 5 }}
                                                                                />
                                                                                加入管控
                                                                            </span>
                                                                        )}
                                                                    </Col>
                                                                </Row>
                                                            ))}
                                                        </div>
                                                    </div>
                                                ) : (
                                                    <div>暂无数据</div>
                                                )}
                                            </TabPane>
                                        ))}
                                    </Tabs>
                                    {/* {tabs.map(item => (
                                        <div
                                            key={`title-${item}`}
                                            className={`app-content-tab ${item === curTab ? "active" : ""}`}
                                            onClick={() => this.handleChangeTab(item)}
                                        >
                                            {item}
                                        </div>
                                    ))} */}
                                </div>
                            </div>
                        )}
                        {type === "Subcject" && <div className="app-list-content" />}
                    </div>
                )}

                {/* 添加APP */}
                <AddAPPOrPeopleModal />
                {/** 设置管控级别 */}
                {addControl && (
                    <AddControl
                        data={curOpenItem}
                        onOk={this.okCall}
                        onCancel={() => this.updateStatus({ addControl: false })}
                    />
                )}
            </div>
        );
    }
}

export default SideLeft;
